<template>
  <div class="finally-item">
    <div
      :class="`rank ${
        index == 0 ? 'rank' : index == 1 ? 'two' : index == 2 ? 'three' : 'h'
      }`"
    >
      <div class="text">
        {{ index + 1 }}
      </div>
    </div>
    <div class="info">
      <div class="name">{{ info.studentName || info.teacherName }}</div>
      <div class="score">{{ info.score }}分</div>
      <div class="i">{{ info.collegeName }}({{ info.grade }})</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Item",
  props: {
    info: {
      type: Object,
      require: true,
    },
    index: {
      type: Number,
    },
  },
};
</script>

<style lang="scss" scoped>
.finally-item {
  // background: #00f0fd;
  background: -webkit-linear-gradient(left, #4ea4fd, #25d0fd, #18ddfe, #00f0fd);
  margin: 0 0.2rem;
  border-radius: 0.2rem;
  position: relative;
  margin-top: 0.12rem;
  height: 1.5rem;
  .info {
    font-size: 0.35rem;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .score {
    }
  }
  .two {
    border-top: 1.2rem solid #ffd801 !important;
  }

  .three {
    border-top: 1.2rem solid #009b5b !important;
  }
  .h {
    border-top: 1.2rem solid #707179 !important;
  }
  .rank {
    position: absolute;
    top: -0.05rem;
    font-size: 0.4rem;
    color: #fff;

    width: 0;
    height: 0;
    border-top: 1.12rem solid #fe5621;
    border-right: 1.3rem solid transparent;
    .text {
      position: relative;
      top: -1rem;
      left: 0.2rem;
    }
  }
}
</style>
